<div class="main-container">
    <div class="left-panel-wrap">
        <div class="chart-wrap pie-chart">
            <div class="chart-title">
                闸前水位
            </div>
            <div echarts class="water-level-chart" [options]="liquidChartOption" [merge]="greenLiquidOption"></div>
            <div class="chart-bottom warning-text">
                警戒水位: {{ this.jzData?.jingjieshuiwei || 2.5 }}m
            </div>
        </div>
        <div class="chart-wrap">
            <div class="chart-title">
                流量曲线
            </div>
            <div echarts class="flow-chart">
                <img src="assets/images/gate/flow-chart.png" style="width: 180px" alt="">
            </div>
        </div>
        <div class="text-wrap">
            <div class="title">
                <i nz-icon nzType="container" nzTheme="outline"></i>
                基本信息
            </div>
            <div class="main-text">
                <div class="prefix">
                    <div class="point"></div>
                    <div class="line"></div>
                </div>
                <div class="text-container">
                    <p>
                        <span class="label">设计流量：</span>
                        <span class="num">{{ jzData?.Designed_Capacity || '--'}}</span>
                        <span class="unit">m³/s</span>
                    </p>
                    <p>
                        <span class="label">闸门类型：</span>
                        <span class="num">{{ jzData?.Type || '--'}}</span>
                        <span class="unit"></span>
                    </p>
                    <p>
                        <span class="label">启闭机型号：</span>
                        <span class="num">{{ jzData?.Power_Type || '--'}}</span>
                        <span class="unit"></span>
                    </p>
                    <p>
                        <span class="label">电动功率：</span>
                        <span class="num">{{ jzData?.diandonggonglv || '--'}}</span>
                        <span class="unit">kw</span>
                    </p>
                    <p>
                        <span class="label">启闭机规格：</span>
                        <span class="num">{{ jzData?.qibijiguige || '--'}}</span>
                        <span class="unit"></span>
                    </p>
                    <p>
                        <span class="label">启闭机设备：</span>
                        <span class="num">{{ jzData?.qibishebei || '--'}}</span>
                        <span class="unit"></span>
                    </p>
                    <p>
                        <span class="label">改造方式：</span>
                        <span class="num">{{ jzData?.gaizaofangshi || '--'}}</span>
                        <span class="unit"></span>
                    </p>
                </div>

            </div>
        </div>
    </div>
    <div class="right-panel-wrap">
        <!--<div class="video-list-wrap" *ngIf="videoIdList;else noVideoTemp">-->
        <div class="video-list-wrap">
            <!--<div id="playWnd" class="playWnd" style="width: 1000px;height: 280px"></div>-->
            <div class="video-wrap" *ngFor="let video of videoArr; let index = index">
                <!--视频窗口展示-->
                <!--<div [id]="'playWnd' + index" class="playWnd" [style.width]="videoWidth + 'px'" style="height: 280px"></div>-->
                <app-map-video [monitorId]="video"></app-map-video>
            </div>
            <!--        <div class="video-box" *ngFor="let item of videos">-->
            <!--            <app-map-video [monitorId]="item.id"></app-map-video>-->
            <!--        </div>-->
        </div>
        <div class="bottom-wrap">
            <div class="row first-row">
                <div class="gate-card-wrap" *ngFor="let item of gateWrapList;let index = index">
                    <div class="card-title">
                        <p class="switch">
                            <nz-switch [ngModel]="dianbiaoData?.A51 === '0'" [nzDisabled]="true"></nz-switch>
                            <span class="offline" [ngClass]="{'blue': dianbiaoData?.A51 === '0'}">在线状态</span>
                        </p>
                        <span>{{item.title}}</span>
                    </div>
                    <div class="card-content">
                        <div class="card-main-content">
                            <div class="main-left-content">
                                <p>
                                    <span>荷重：</span>
                                    <nz-input-group nzSuffix="t">
                                        <input type="text" nz-input [ngModel]="dianbiaoData[gateConfig[item.title].weight]" readonly/>
                                    </nz-input-group>
                                </p>
                                <p>
                                    <span>开度：</span>
                                    <nz-input-group nzSuffix="m">
                                        <input type="text" nz-input [(ngModel)]="dianbiaoData[gateConfig[item.title].opening]"/>
                                    </nz-input-group>
                                </p>
                                <div class="control-btn-group">
                                    <button class="green-btn" (click)="setControl(gateConfig[item.title].control, 1, item)">开启</button>
                                    <button class="grey-btn" (click)="setControl(gateConfig[item.title].control, 2, item)">关闭</button>
                                    <a (click)="setControl(gateConfig[item.title].control, 3, item)">停止</a>
                                </div>
                            </div>
                            <div class="main-right-content">
                                <div class="content-wrap">
                                    <div class="chart-wrap">
                                        <div class="shadow-wrap">

                                        </div>
                                        <div echarts [options]="basicOpts" [merge]="customOpts[index]" style="height: 120px"></div>

                                    </div>
                                    <div class="data-wrap">
                                        <div class="prefix">
                                            <div class="point"></div>
                                            <div class="line"></div>
                                        </div>
                                        <div class="data-container">
                                            <p class="label">当前开度：</p>
                                            <p class="value">{{ chartData[index] | number: '1.2-2' }}m</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-bottom-content">
                            <span class="status-switch switch">
                                <nz-switch [ngModel]="dianbiaoData[gateConfig[item.title].remote] === 'true'" [nzDisabled]="true"></nz-switch>
                                <span class="offline" [ngClass]="{'blue': dianbiaoData[gateConfig[item.title].remote] === 'true'}">远程</span>
                            </span>
                            <span class="status-switch switch">
                                <nz-switch [ngModel]="dianbiaoData[gateConfig[item.title].openGate] === 'true'" [nzDisabled]="true"></nz-switch>
                                <span class="offline" [ngClass]="{'blue': dianbiaoData[gateConfig[item.title].openGate] === 'true'}">启门</span>
                            </span>
                            <span class="status-switch switch">
                                <nz-switch [ngModel]="dianbiaoData[gateConfig[item.title].closeGate] === 'true'" [nzDisabled]="true"></nz-switch>
                                <span class="offline" [ngClass]="{'blue': dianbiaoData[gateConfig[item.title].closeGate] === 'true'}">闭门</span>
                            </span>
                            <span class="status-switch switch">
                                <nz-switch [ngModel]="dianbiaoData[gateConfig[item.title].fault] === 'true'" [nzDisabled]="true"></nz-switch>
                                <span class="offline" [ngClass]="{'blue': dianbiaoData[gateConfig[item.title].fault] === 'true'}">故障</span>
                            </span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row second-row" *ngIf="dianbiaoData2">
                <div class="gate-card-wrap" *ngFor="let item of gateWrapList2;let index = index">
                    <div class="card-title">
                        <p class="switch">
                            <nz-switch [ngModel]="dianbiaoData2?.A51 === '0'" [nzDisabled]="true"></nz-switch>
                            <span class="offline" [ngClass]="{'blue': dianbiaoData2?.A51 === '0'}">在线状态</span>
                        </p>
                        <span>{{item.title}}</span>
                    </div>
                    <div class="card-content">
                        <div class="card-main-content">
                            <div class="main-left-content">
                                <p>
                                    <span>荷重：</span>
                                    <nz-input-group nzSuffix="t">
                                        <input type="text" nz-input [ngModel]="dianbiaoData2[gateConfig[item.title].weight]" readonly/>
                                    </nz-input-group>
                                </p>
                                <p>
                                    <span>开度：</span>
                                    <nz-input-group nzSuffix="m">
                                        <input type="text" nz-input [(ngModel)]="dianbiaoData2[gateConfig[item.title].opening]"/>
                                    </nz-input-group>
                                </p>
                                <div class="control-btn-group">
                                    <button class="green-btn" (click)="setControl(gateConfig[item.title].control, 1, item, true)">开启</button>
                                    <button class="grey-btn" (click)="setControl(gateConfig[item.title].control, 2, item, true)">关闭</button>
                                    <a (click)="setControl(gateConfig[item.title].control, 3, item, true)">停止</a>
                                </div>
                            </div>
                            <div class="main-right-content">
                                <div class="content-wrap">
                                    <div class="chart-wrap">
                                        <div class="shadow-wrap">

                                        </div>
                                        <div echarts [options]="basicOpts" [merge]="customOpts[index + 3]" style="height: 120px"></div>

                                    </div>
                                    <div class="data-wrap">
                                        <div class="prefix">
                                            <div class="point"></div>
                                            <div class="line"></div>
                                        </div>
                                        <div class="data-container">
                                            <p class="label">当前开度：</p>
                                            <p class="value">{{ chartData[index + 3] | number: '1.2-2' }}m</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-bottom-content">
                            <span class="status-switch switch">
                                <nz-switch [ngModel]="dianbiaoData2[gateConfig[item.title].remote] === 'true'" [nzDisabled]="true"></nz-switch>
                                <span class="offline" [ngClass]="{'blue': dianbiaoData2[gateConfig[item.title].remote] === 'true'}">远程</span>
                            </span>
                            <span class="status-switch switch">
                                <nz-switch [ngModel]="dianbiaoData2[gateConfig[item.title].openGate] === 'true'" [nzDisabled]="true"></nz-switch>
                                <span class="offline" [ngClass]="{'blue': dianbiaoData2[gateConfig[item.title].openGate] === 'true'}">启门</span>
                            </span>
                            <span class="status-switch switch">
                                <nz-switch [ngModel]="dianbiaoData2[gateConfig[item.title].closeGate] === 'true'" [nzDisabled]="true"></nz-switch>
                                <span class="offline" [ngClass]="{'blue': dianbiaoData2[gateConfig[item.title].closeGate] === 'true'}">闭门</span>
                            </span>
                            <span class="status-switch switch">
                                <nz-switch [ngModel]="dianbiaoData2[gateConfig[item.title].fault] === 'true'" [nzDisabled]="true"></nz-switch>
                                <span class="offline" [ngClass]="{'blue': dianbiaoData2[gateConfig[item.title].fault] === 'true'}">故障</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<nz-modal [(nzVisible)]="isVisible"
        nzTitle="请输入管理员控制密码"
        nzWidth="400"
          [nzStyle]="passwordModalStyle"
        (nzOnCancel)="handleCancel()"
        (nzOnOk)="handleOk()"
        [nzOkLoading]="isOkLoading">
    <form nz-form [formGroup]="passwordForm">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="24">
                <nz-form-item nzFlex>
                    <nz-form-label [nzSpan]="6">控制密码</nz-form-label>
                    <nz-form-control [nzSpan]="16">
                        <nz-input-group [nzSuffix]="suffixTemplate">
                            <input [type]="hidePwd ? 'password' : 'text'" nz-input formControlName="password"
                                   placeholder="密码" />
                        </nz-input-group>
                        <ng-template #suffixTemplate>
                            <i nz-icon [nzType]="hidePwd ? 'eye-invisible' : 'eye'"
                               (click)="hidePwd = !hidePwd"></i>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
    </form>
</nz-modal>
